import React, { useState, useEffect } from 'react';
import '../App.css';
import axios from 'axios';
import { Steps, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

const { Step } = Steps;

export default function Find() {
  const [step, setStep] = useState(0);
  const [phone, setPhone] = useState('');
  const [yanZhengma, setYanZhengma] = useState('');
  const [pwd, setPwd] = useState('');
  const [newPwd, setNewPwd] = useState('');
  const [countdown, setCountdown] = useState(0);
  const reg = /^1[3-9]\d{9}$/;
  const navigate = useNavigate()

  // 验证码倒计时
  useEffect(() => {
    let timer = null;
    if (countdown > 0) {
      timer = setInterval(() => {
        setCountdown(prev => prev - 1);
      }, 1000);
    } else if (countdown === 0) {
      clearInterval(timer);
    }
    return () => clearInterval(timer);
  }, [countdown]);

  // 验证手机号
  const validatePhone = () => {
    if (!phone) {
      Toast.show('手机号不能为空', 1);
      return false;
    }
    if (!reg.test(phone)) {
      Toast.show('请输入正确的手机号', 1);
      return false;
    }
    return true;
  };

  // 验证验证码
  const validateCode = () => {
    if (!yanZhengma) {
       Toast.show('请输入验证码', 1);
      return false;
    }
    return true;
  };

  // 验证密码
  const validatePassword = () => {
    if (!pwd) {
       Toast.show('请输入密码', 1);
      return false;
    }
   
    if (pwd !== newPwd) {
      Toast.show('两次输入的密码不一致', 1);
      return false;
    }
    return true;
  };

  // 发送验证码
  const sendCode = () => {
     axios.post('http://127.0.0.1:3001/sendYzm', { phone: phone }).then(res => {
      if (res.status == 200) {
        if (res.data.code === 200) {
          alert('验证码已发送')
        } else {
          alert('验证码发送失败')
         alert(res.data.msg)
        }
      } else {
        alert('请求失败，请稍后再试');
      }

    })
  };

  // 下一步
  const nextStep = () => {
    if (step === 0) {
      if (validatePhone() && validateCode()) {
        setStep(1);
      }
    } else if (step === 1) {
      if (validatePassword()) {
        // 调用后端重置密码接口
        axios.post('http://127.0.0.1:3001/resetPassword', {
          phone,
          yanZhengma,
          newPwd
        })
          .then(res => {
            if (res.status === 200 && res.data.code === 200) {
              setStep(2);
            } else {
              Toast.show(res.data.message || '密码重置失败', 1);
            }
          })
          .catch(err => {
            console.error('重置密码错误:', err);
            Toast.show('网络错误，请稍后再试', 1);
          });
      }
    }
  };

  return (
    <div className='content'>
      <div className='find'>
        <Steps current={step} >
          <Step title='验证手机号' />
          <Step title='设置新密码' />
          <Step title='重置成功' />
        </Steps>
        <div className='div' style={{ display: step == 0 ? '' : 'none' }}>
          <input type="text" value={phone} onChange={(event) => {
            setPhone(event.target.value)
          }} placeholder='请输入手机号' />
          <br />
          <input type="text" placeholder='请输入验证码' value={yanZhengma} onChange={(event) => {
            setYanZhengma(event.target.value)
          }} />
          <button onClick={sendCode} style={{ position: 'absolute', top: '310px', left: '220px', border: 'none', color: 'blue', backgroundColor: '#fff' }}>发送验证码</button>
          <br />
          <button onClick={nextStep} className='btn'>下一步</button>

        </div>
        <div className='div' style={{ display: step == 1 ? '' : 'none' }}>
          <input type="password" value={pwd} onChange={(event) => {
            setPwd(event.target.value)
          }} placeholder='请输入密码' />
          <br />
          <input type="password" placeholder='再次输入密码' value={newPwd} onChange={(event) => {
            setNewPwd(event.target.value)
          }} />
          <br />
          <button onClick={nextStep} className='btn'>下一步</button>

        </div>
        <div className="div" style={{ display: step === 2 ? '' : 'none', textAlign: 'center', padding: '50px 0' }}>
          <div style={{ fontSize: 24, marginBottom: 20, color: '#52c41a' }}>✔</div>
          <h3>密码重置成功</h3>
          <p style={{ color: '#999', margin: '10px 0 30px' }}>请使用新密码登录</p>
          <button
            onClick={() => navigate('/login')}
            className="btn"
            style={{ width: '200px', margin: '0 auto' }}
          >
            返回登录
          </button>
        </div>

      </div>

    </div>
  )
}
